<template>
    <div class="box">
        <!-- 顶部-->
        <div class="search_top">
            <!-- 搜索区域 -->
            <form class="search">
                <van-icon name="arrow-left" @click="goback" />
                <van-search v-model="value" show-action placeholder="清风抽纸" shape="round">
                    <template #action>
                        <div @click="onSearch">搜索</div>
                    </template>
                </van-search>
            </form>


            <!-- 筛选 -->
            <van-dropdown-menu>
                <van-dropdown-item v-model="value2" :options="option" @change="changeSort(value2)"/>
                <van-dropdown-item title="筛选" ref="item">
                    <!-- 价格区间 -->
                       <div class="price">
                        <van-field v-model="value3" placeholder="最低价格" type="number"/>
                        <van-field v-model="value4" placeholder="最高价格"  type="number"/>
                       </div>
                    <div style="padding: 5px 16px;">
                        <van-button type="danger" block round @click="onConfirm">
                            确认
                        </van-button>
                    </div>
                </van-dropdown-item>
            </van-dropdown-menu>
            <!-- 尾部-->
        <div class="search_footer">
            <ul>
                <li v-for="goods in goodslist" :key="goods.proid" @click="goGoods(goods.proid)">
                    <van-card :price="goods.originprice" :desc="goods.proname" :thumb="goods.img1" />
                </li>
            </ul>
        </div>
        </div>
        
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: this.$route.query.keyword,
            goodslist: [],
            // 筛选
            value2: 0,
           
            option: [
                { text: '全部商品', value: 0 },
                { text: '价格升序', value: 1 },
                { text: '价格降序', value: 2 },
            ],
            value3:'0',
            value4:'99999',
        }
    },
    methods: {
        goGoods(goodsProid){
            this.$router.push('/goods?id='+goodsProid)
        },
        // 按照价格升降序进行筛选
        changeSort(value2){
            let list = this.goodslist
            if(value2==0){
                this.goodslist = list
            }else if(value2==1){
                this.goodslist = list.sort((a,b)=>a.originprice-b.originprice)
            }else{
                this.goodslist = list.sort((a,b)=>b.originprice-a.originprice)
            }
        },
        // 筛选按照价格区间筛选
        onConfirm() {
            console.log("this.value3",this.value3);
            let arr = this.goodslist.filter(item=>this.value3<=item.originprice&&item.originprice<=this.value4)
            this.goodslist = arr
            this.$refs.item.toggle();
        },
        onSearch() {
            // 搜索列表重新发请求
            this.$service({
            method: 'get',
            url: 'pro/search',
            data: {
                count: 1,
                limitNum: 10,
                keyword:this.value
            }
        })
            .then(res => {
                if (res.data.code == 200) {
                    console.log("再次发送res.data.data", res.data.data);
                    this.goodslist = res.data.data
                }
            })
         },
        goback() {
            this.$router.back()
        }
    },
    created() {
        let keyword1 = this.$route.query.keyword
        let keyword2 = this.$route.query.brand
        let category = this.$route.query.category
        // console.log("keyword1",keyword1);
        // console.log("keyword2",keyword2);
        // console.log("category",category);
        console.log('this.$route.query.category',this.$route.query.category);
        // console.log('传递过来的数据',this.$route.query.keyword);
        // 获取搜索列表
        if(keyword1){
        this.$service({
            method: 'get',
            url: 'pro/search',
            params: {
                count: 1,
                limitNum: 10,
                keyword: keyword1
            }
        })
            .then(res => {
                if (res.data.code == 200) {
                    console.log("res.data.data", res.data.data);
                    this.goodslist = res.data.data
                }
            })
        }
        // 分类品牌转跳
        if(keyword2){
            this.$service({
            method: 'get',
            url: 'pro/categorybrandprolist',
            params: {
                count: 1,
                limitNum: 10,
                category:category,
                brand: keyword2
            }
        })
            .then(res => {
                console.log('品牌转跳',res);
                if (res.data.code == 200) {
                    console.log("res.data.data", res.data.data);
                    this.goodslist = res.data.data
                }
            })
        }
    }
}
</script>

<style scoped>
.search_top {
    padding: 0 .625rem;
    background-color: white;
}

.search {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 商品列表 */
.search_footer {
    background-color: #efefef;
}

.search_footer ul li {
    margin: .625rem 0;
}

/* 筛选 */
.price{
    display: flex;
    justify-content: space-around;
}

#app > div > div.search_top > div > div:nth-child(3) > div > div.van-popup.van-popup--top.van-dropdown-item__content > div:nth-child(1) > div > div > input{
   display: inline-block;
    width: 48%;
}
</style>>

</style>